// @ts-ignore
import {Component, useState, useEffect} from 'react'
// @ts-ignore
import {connect} from "react-redux";
import Taro from "@tarojs/taro";
import {View, Image} from "@tarojs/components";

// 静态资源
import './index.scss'
import headPortraitIcon from '../../assets/images/my/1.jpg'
import arrowIcon from '../../assets/images/my/arrow.png'
// @ts-ignore
import issueIcon from '../../assets/images/my/issue.png'
// @ts-ignore
import saleIcon from '../../assets/images/my/sale.png'
// @ts-ignore
import buyIcon from '../../assets/images/my/buy.png'



// 用户头像、昵称
function UserHead() {

    return (
        <View className="user-info-container">

            <View className="head-nick-container">
                {/* 头像 */}
                <Image className="head-portrait" src={headPortraitIcon}></Image>

                <View className="nickname-vip-container">
                    <View className="nickname">我把你画成画未开的一朵画</View>
                </View>
            </View>

            <View className="arrow-container">
                <Image src={arrowIcon}></Image>
            </View>

        </View>
    )
}

// 我的交易
function MyDeal() {

    // 去我的发布界面
    function gotoMyIssue() {
        Taro.navigateTo({
            url: '/pages/my-issue/index'
        })
    }

    return (
        <View className="my-deal-container">

            <View className="deal-word-number">
                <View className="deal-word">我的交易</View>
                <View className="deal-number">闲置交易了13671.00元</View>
            </View>

            {/* 功能位 */}
            <View className="function-item-container">

                <View className="function-item" onClick={gotoMyIssue}>
                    <Image className="function-icon" src={issueIcon}></Image>
                    <View className="function-word">我发布的 1</View>
                </View>
                <View className="function-item">
                    <Image className="function-icon" src={saleIcon}></Image>
                    <View className="function-word">我卖出的 1</View>
                </View>
                <View className="function-item">
                    <Image className="function-icon" src={buyIcon}></Image>
                    <View className="function-word">我买到的 1</View>
                </View>



            </View>


        </View>
    )
}


function My() {


    return (
        <View>

            {/* 用户信息 */}
            <UserHead/>

            {/* 我的交易 */}
            <MyDeal/>

        </View>
    )

}

export default My
